<template>
  <div class="app-container home">
    <el-divider content-position="left">团队统计</el-divider>
      <el-row>
        <el-col :span="5">
        <el-statistic title="团队总数" :value="teamInfo.teamTotal"/>
      </el-col>
      <el-col :span="5">
        <el-statistic title="团队已审核" :value="teamInfo.teamPending"/>
      </el-col>
      <el-col :span="5">
        <el-statistic title="团队待审核" :value="teamInfo.teamAudited" />
      </el-col>
      <el-col :span="5">
        <el-statistic title="团队驳回" :value="teamInfo.teamReject" />
      </el-col>
      <el-col :span="4">
        <el-statistic title="注册成员" :value="memberInfo.memberTotal" />
      </el-col>
    </el-row>
    <el-divider content-position="left" style="margin-top: 50px;">项目统计</el-divider>
    <el-row style="margin-top: 50px;">
      <el-col :span="6">
        <el-statistic title="项目总数" :value="projectInfo.projectTotal" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="项目待开始" :value="projectInfo.projectToBegin" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="项目进行中" :value="projectInfo.projectInProgress" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="项目已完成" :value="projectInfo.projectReject" />
      </el-col>
    </el-row>
    <el-divider />
    
    <!-- <el-row>
      <el-col :span="8" class="card-box">
        <el-card>
          <template #header><PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">本年度桥梁巡检次数统计</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="bIYearNumsChart" style="height: 350px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" class="card-box">
        <el-card>
          <template #header><Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">本年度桥梁病害数量统计</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="bDYearNumsChart" style="height: 350px" />
          </div>
        </el-card>
      </el-col>  
      <el-col :span="8" class="card-box">
        <el-card>
          <template #header><Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">本年度桥梁巡检发现病害情况</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="bDYearRatiosChart" style="height: 350px" />
          </div>
        </el-card>
      </el-col>  
    </el-row>
    <el-row :gutter="20" v-show="true">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          <div ref="chart" style="width: 600px; height: 400px"></div>
        </blockquote>
        <hr />
      </el-col>
    </el-row>-->
    <el-divider /> 
  </div>
</template>

<script setup name="Index">
//import * as echarts from 'echarts'
import { findStatistics } from "@/api/ndpf/report";

const teamInfo = ref({});
const memberInfo = ref({});
const projectInfo = ref({});

const chart =ref(); // 创建DOM引用
const version = ref('3.8.5')


const data = reactive({
  queryParams: {
  }
});
const { queryParams } = toRefs(data);


function getStatistics(){
    findStatistics(queryParams).then(response => {
        teamInfo.value = response.teamInfo;
        memberInfo.value = response.memberInfo;
        projectInfo.value = response.projectInfo;
    })
}

function drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = echarts.init(chart.value)
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

function drawBIYearNumChart(){
  getBridgeInspectionYearNum(queryParams).then(response => {
    let myChart = echarts.init(bIYearNumsChart.value)
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: response.bridgeNames,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: response.inspectionNumbs,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
            }
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  });
}  

function drawBDYearNumChart(){
  getBridgeDiseaseYearNum(queryParams).then(response => {
    let myChart = echarts.init(bDYearNumsChart.value)
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: response.bridgeNames,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: response.diseaseNums,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
            }
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  });
}   

function drawBDYearRatiosChart(){
  getBridgeDiseaseYearRatio(queryParams).then(response => {
    let myChart = echarts.init(bDYearRatiosChart.value)
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
             normal: {
               color: function (colors) {
                 var colorList = [                  
                   '#3BA272',
                   '#fc8251'
                 ];
                  return colorList[colors.dataIndex];
                }
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: response.bridgeDiseaseYearRatios
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  });
}    
    
onMounted(() => {
    //drawChart();
    //drawBIYearNumChart(); 
    //drawBDYearNumChart();
    //drawBDYearRatiosChart();
  })

function getDashboardList(){
  getDashboard(queryParams).then(response => {
    bridgeNum.value = response.bridgeNum;
    projectNum.value = response.projectNum;
    inspectionNum.value = response.inspectionNum;
    diseaseNum.value = response.diseaseNum;
    maintainNum.value = response.maintainNum;

    projectYearNum.value = response.projectYearNum;
    inspectionYearNum.value = response.inspectionYearNum;
    diseaseYearNum.value = response.diseaseYearNum;
    maintainYearNum.value = response.maintainYearNum;
  });
}


getStatistics();
//getDashboardList();  
//getBIYearNumChart();  
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.el-col {
  text-align: center;
}

.el-statistic {
  --el-statistic-title-font-size: 20px;
  --el-statistic-content-font-size: 20px;
  --el-statistic-title-color: rgb(33, 6, 95);
  --el-statistic-content-color: rgb(252, 85, 44);
}
.el-divider {
  font-size : 20px
}
</style>

